<template>
	<view class="sales_content  u-skeleton">
		<view class="title u-skeleton-rect">
			我的客户
		</view>
		<u-notice-bar class="noticeBar u-skeleton-rect" mode="horizontal" :list="noticeList" bg-color="#FFFFFF"></u-notice-bar>
		<view class="clientTotal">当前注册用户总数为：{{total}}位</view>
		<view class="salesman u-skeleton-fillet" @tap="callPhoneFun(clientItem)"  v-for="(clientItem,index) in clientManData"
			:key="clientItem.id">
			
				
			
			<image :src="clientItem.avatar" mode="aspectFill" class="avatar u-skeleton-circle"></image>
			<view class="reference">
				<view class="re_top">

					<view class="name u-skeleton-rect">
						昵称：{{clientItem.nickname}}
					</view>

					

					<view class="sex u-skeleton-rect">
						性别：{{clientItem.sex  == 0 ? "男" : "女"}}
					</view>
					<!-- <view class="age u-skeleton-rect">
						编号：{{clientItem.sn}}
					</view> -->
				</view>

				<view class="phone u-skeleton-rect">
					联系方式：{{clientItem.mobile}}
				</view>

				<view class="resume u-skeleton-rect">
					<view >
						创建时间：
						{{$u.timeFormat(clientItem.create_time, 'yyyy年mm月dd日hh时MM分ss秒')}}
					</view>
					<view >
						最后登录时间：
						{{$u.timeFormat(clientItem.login_time, 'yyyy年mm月dd日hh时MM分ss秒')}}
					</view>
					<view >
						编号：
						{{clientItem.sn}}
					</view>
				</view>
			</view>
			
		</view>

		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		<u-action-sheet :list="list" @click="actionSheet" v-model="show"></u-action-sheet>

		<!-- 骨架屏 -->
		<!-- <u-skeleton :loading="isSkeletonLoading" :animation="true" bgColor="#FFF"></u-skeleton> -->
	</view>
</template>

<script>
	import {
		
		getUserInfoAll,
		
	} from "@/api/user";
	// import EventBus from "@/utils/eventBus.js"
	export default {
		name:'my-client',
		// props:['salesmanData'],
		data() {
			return {
				status: 'loadmore',
				clientManData:[],
				pageNum:1,
				total:Number,
				per_page:Number,
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '亲，已经到底了哦'
				},
				list: [{
					text: '复制微信号',
					color: '#999999',
					fontSize: 28,
					subText: ''
				}, {
					text: '拨打电话'
				}],
				noticeList: [
					'为尊重保护客户隐私，请勿轻易泄露客户信息',
					
				],
				show: false,
				activePhone: '',
				// isSkeletonLoading: true, // 是否显示骨架屏组件
				// salesmanData: tsalesmanData
			};
		},
		onLoad(){
			this.getUserInfoAllFun();
		},
		created() {
			// setTimeout(() => {
			// 	this.isSkeletonLoading = false;
			// }, 2000)
			// this.$nextTick(()=>{
			// 	if(this.salesmanData)
			// 	{
			// 		this.isSkeletonLoading = false;
			// 	}
			// })
		},
		methods: {
			async getUserInfoAllFun(){
				const _that = this;
					await getUserInfoAll({pageNum:_that.pageNum}).then(res => {
						if (res.code == 1) {
							// res.data.forEach(function (item, index) {
							// let create_time = _that.$u.timeFormat(item.create_time, 'yyyy-mm-dd');
							// let login_time = _that.$u.timeFormat(item.login_time, 'yyyy-mm-dd-hh-MM-ss');
							// item.create_time = create_time;
							// item.login_time = login_time;
							//     // console.log(time,'输出数组的每一个元素'); //输出数组的每一个元素
							
							// });
							this.clientManData = [...this.clientManData,...res.data.data];
							this.total = res.data.total;
							this.per_page = res.data.per_page;
							// this.clientManData.push(res.data);
						}
					})
					// const res = await getUserInfoAll({pageNum:_that.pageNum});
					// 		this.clientManData = [...this.clientManData,...res.data.data];
					// 		this.total = res.data.total;
					// 		this.per_page = res.data.per_page;
					console.log(this.clientManData,'客户信息')
			},
			// 触底的事件
			onReachBottom() {
				if (this.pageNum * this.per_page >= this.total) {
					this.status = 'nomore';
					return;
				}
				this.status = 'loading';
				this.pageNum++;
				this.getUserInfoAllFun();
			},
			//需要一个提示框显示名字手机号确定拨打
			callPhoneFun(clientItem) {
				// console.log(clientItem,"一个客户");
				this.activePhone = clientItem.mobile
				console.log(this.activePhone);
				this.show = true; //打开操作菜单
				this.list[0].subText = clientItem.nickname + clientItem.mobile

			},

			//actionSheet操作菜单
			actionSheet(e) {

				switch (e) {
					case 0:
						//复制手机号
						uni.setClipboardData({
							data: this.activePhone,
							success: function() {
								console.log(this.data);
							}
						});
						break;
					case 1:
						//拨打手机号码
						uni.makePhoneCall({
							phoneNumber: this.activePhone, //仅为示例
							success: function() {
								console.log('拨打电话成功')
							},
							fail: function() {
								console.log('拨打电话失败')
							}
						});
						break;
				}
			}

		}

	}
</script>

<style lang="scss" scoped>
	
	.sales_content {
		// width: 750rpx;
		width: 100%;
		height: 100%;
		position: relative;
		// padding-bottom: 100rpx;
		// background-color: #FDF6EC;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
		.title {
			color: #ffa60f;
			font-size: 60rpx;
			margin-bottom: 30rpx;
			padding-top: 30rpx;
			text-align: center;
			font-weight: 700;
			font-style: italic;
		}

		.noticeBar {
			width: 750rpx;
		}

		.salesman {
			// height: 300rpx;
			min-height: 300rpx;
			box-shadow: 25rpx 25rpx 50rpx #e6e7ea, -25rpx -25rpx 50rpx #ffffff;
			margin: 0rpx 20rpx 40rpx 20rpx;
			padding: 20rpx 0;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// border: 1rpx dashed  #ffa60f;
			background-image: linear-gradient(45deg, #1e1e1e, #666666, #9d9d9d);

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				margin: 0 20rpx;
			}

			.reference {
				flex: 1;

				.re_top {
					display: flex;
					font-size: 24rpx;
					margin: 10rpx 0 20rpx 0;
					// font-style: italic;
					color: #ffa60f;

					.name {
						flex: 1;
					}

					.age {
						flex: 1;
						text-align: center;
					}

					.sex {
						flex: 1;
					}
				}

				.phone {
					font-size: 24rpx;
					font-style: italic;
					flex: 1;
					margin: 10rpx 0 20rpx 0;
					color: #ffa60f;
				}

				.resume {
					font-size: 20rpx;
					flex: 1;
					color: #ffa60f;
					// border-top: 3rpx solid #FED71A;
					border-top: 3rpx solid #999999;
					margin-right: 20rpx;
					padding-top: 20rpx;
				}

			}
		}
	}
	
	.clientTotal{
		margin: 10rpx 20rpx;
		font-size: 34rpx;
		color: #ffa60f;
	}
</style>